<template>
	<div class="atuser-list">
    <ul>
      <li v-for="(item,index) in converMember" :key="index" @click="seluser(item)">
        <div class="avatar-left"><avatar :src="item.faceUrl" /></div>
        <div class="name">
          <div class="text-ellipsis">{{item.nickname}}</div>
          <div class="conver-label">{{item.healthManagerTypeName}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState , mapGetters } from 'vuex'
export default {
  title: '选择提醒的人',
  data() {
    return {
    }
  },
  computed: {
    ...mapState({
      converMember: state => state.conversation.converMember,
    }),
  },
  created() {
  },
  mounted(){
    document.title="选择提醒的人"
    this.$setCookie('chatpageback','atuser')
  },
  methods: {
    seluser(item){
      this.$store.commit('uploadSelectedMember',item.nickname)
      this.$router.back()
    }
  },
}
</script>
<style lang="scss" scoped>
.atuser-list{
  background-image: linear-gradient(0deg, rgba(252,252,252,0.50) 14%, #F7F7F7 100%);
  padding: .026667rem .506667rem .8rem;
  width: 100%;
  background: white;
  height: 100%;
  overflow-y: auto;
  ul{
    li{
      width: 100%;
      height: 1.48rem;
      border-bottom: solid .013333rem rgba(0,0,0,0.06);
      position: relative;
      padding: 0 .4rem 0 1.986667rem;
      .avatar-left{
        position: absolute;
        top: .22rem;
        left: .56rem;
      }
      .name{
        display: flex;
        align-items: center;
        width: 100%;
        height: 1.48rem;
        .text-ellipsis{
          flex: 0 1 auto;
          font-size: .346667rem;
          color: #3D3D3D;
          margin-right: .2rem;
          @include ellipsis();
        }
        .conver-label{
          display: flex;
          align-items: center;
          flex-shrink: 0;
          padding: 0 .2rem;
          height: .453333rem;
          font-size: .32rem;
          color: white;
          background: #A49272;
          border-radius: .261333rem;
        }
      }
    }
  }
}
</style>